<!DOCTYPE html>
<!--thymeleaf 引入需要-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>

<table class="table table-bordered" contenteditable="true">
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>邮箱</th>
    </tr>
    </thead>
    <tbody>
        <tr th:each="user:${pageInfo.list}">
           <td th:text="${user.getId()}"></td>
           <td th:text="${user.getName()}"></td>
           <td th:text="${user.getAge()}"></td>
           <td th:text="${user.getEmail()}"></td>
        </tr>
    </tbody>
</table>
<nav aria-label="Page navigation">
    <ul class="pagination pull-right no-margin">
        <!--    首页钮-->
        <li th:if="${pageInfo.hasPreviousPage}">
            <a th:href="'/boot/user/limit?pageNum=1'">首页</a>
        </li>
        <!--        《钮-->
        <li class="prev" th:if="${pageInfo.hasPreviousPage}">
            <a th:href="'/boot/user/limit?pageNum='+${pageInfo.prePage}">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <!--遍历条数-->
        <li th:each="nav:${pageInfo.navigatepageNums}">
            <a th:href="'/boot/user/limit?pageNum='+${nav}" th:text="${nav}" th:if="${nav != pageInfo.pageNum}"></a>
            <span style="font-weight: bold;background: #6faed9;" th:if="${nav == pageInfo.pageNum}" th:text="${nav}" ></span>
        </li>
        <!--        》钮-->
        <li class="next" th:if="${pageInfo.hasNextPage}">
            <a th:href="'/boot/user/limit?pageNum='+${pageInfo.nextPage}" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
        <!--        尾页钮-->
        <li th:if="${pageInfo.hasNextPage}">
            <a th:href="'/boot/user/limit?pageNum='+${pageInfo.pages}">尾页</a>
        </li>
    </ul>
</nav>

</body>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</html>